<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志测试页面</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background: #1a1a1a;
            color: #00ff00;
            padding: 20px;
        }
        h1 {
            color: #4a90e2;
        }
        .log {
            background: #000;
            padding: 10px;
            border: 1px solid #333;
            margin: 10px 0;
            border-radius: 5px;
        }
        .success {
            color: #00ff00;
        }
        .error {
            color: #ff0000;
        }
        .info {
            color: #ffff00;
        }
    </style>
</head>
<body>
    <h1>🔍 演示前端日志测试</h1>
    <div id="output"></div>

    <script>
        const output = document.getElementById('output');

        function log(message, type = 'info') {
            const div = document.createElement('div');
            div.className = `log ${type}`;
            div.textContent = message;
            output.appendChild(div);
            console.log(message);
        }

        // 测试 1: 基础日志
        log('✅ 测试 1: 页面加载成功', 'success');
        log('✅ 测试 2: JavaScript 运行正常', 'success');

        // 测试 3: 检查路径
        log('📁 当前页面: ' + window.location.href, 'info');
        log('📁 预期页面: http://localhost:7285/', 'info');

        // 测试 4: 检查配置文件
        fetch('/project/config.json')
            .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                return res.json();
            })
            .then(config => {
                log('✅ 测试 3: 配置文件读取成功', 'success');
                log('   - 模式: ' + config.mode, 'info');
            })
            .catch(err => {
                log('❌ 测试 3: 配置文件读取失败 - ' + err.message, 'error');
            });

        // 测试 5: 检查 viewer.js
        fetch('/scripts/viewer.js')
            .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                log('✅ 测试 4: viewer.js 文件存在', 'success');
            })
            .catch(err => {
                log('❌ 测试 4: viewer.js 文件不存在 - ' + err.message, 'error');
            });

        // 测试 6: 检查 projectLoader.js
        fetch('/scripts/projectLoader.js')
            .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                log('✅ 测试 5: projectLoader.js 文件存在', 'success');
            })
            .catch(err => {
                log('❌ 测试 5: projectLoader.js 文件不存在 - ' + err.message, 'error');
            });

        // 测试 7: 检查 OrbitControls
        fetch('/lib/three/examples/jsm/controls/OrbitControls.js')
            .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                log('✅ 测试 6: OrbitControls.js 文件存在', 'success');
            })
            .catch(err => {
                log('❌ 测试 6: OrbitControls.js 文件不存在 - ' + err.message, 'error');
            });

        setTimeout(() => {
            log('', 'info');
            log('═══════════════════════════════════════', 'info');
            log('📋 测试完成！', 'success');
            log('═══════════════════════════════════════', 'info');
            log('', 'info');
            log('💡 如果所有测试都通过：', 'info');
            log('   1. 关闭此页面', 'info');
            log('   2. 访问 http://localhost:7285/', 'info');
            log('   3. 按 F12 打开开发者工具', 'info');
            log('   4. 切换到 Console 标签', 'info');
            log('   5. 按 Ctrl+F5 强制刷新页面', 'info');
            log('', 'info');
            log('🔴 如果有测试失败，请告诉我具体失败的测试', 'error');
        }, 1000);
    </script>
</body>
</html>

